<template>
	<view class="rig">
		<view style="color: #999999;padding: 8px 17px;">已有
			<text style="color: #FF5F49;">{{msgNumber}}</text>人报名
		</view>
		<view class="rig-wrapper">
			<view class="rig-item" v-for="(item,index) in joinList">
				<image :src="item.avatar" style="border-radius: 50%;"></image>
				<view class="rig-text">
					<view class="rig-name">{{item.nickname}}</view>
					<view class="rig-time">报名时间：{{item.create_time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageId:"",
				joinList:"",
				msgNumber:""
			}
		},
		onLoad(options){
			this.pageId = options.id;
			this.getJoinList()
		},
		methods: {
			//报名列表
				getJoinList() {
					const params = {
						id: this.pageId,
					}
				
					this.$http.get('/activity/joinList', {
						params: params
					}).then((response) => {
						const res = response.data;
						console.log(res)
						if (res.code == 0) {
					      this.joinList = res.data.data;
						  this.msgNumber = res.msg
						} else {
							
						}
					})
				}
		}
	}
</script>

<style>
	.rig{
		width: 100%;
	}
.rig-wrapper{
	display: flex;
	flex-direction: column;
	background-color: #fff;
	height: 100%;
	padding: 10px 17px;
}
.rig-item{
	display: flex;
	flex-direction: row;
	margin: 5px 0;
}
.rig-item image{
	width: 44px;
	height: 44px;
	margin-right: 8px;
}
.rig-text{
	display: flex;
	flex-direction: column;
}
.rig-name{
	color: #333333;
	font-size: 15px;
}
.rig-time{
	color: #999999;
	font-size: 13px;
}
</style>
